<template>
  <div class="icon-label-value">
    <flex-row row-align="space-between">
      <template v-if="type === 1">
        <el-image :src="icon"></el-image>
        <div class="label-value">
          <div>
            <span class="value">{{ value === '' ? '-' : value }}</span>
            <span style>{{ unit }}</span>
          </div>
          <div class="label">{{ label }}</div>
        </div>
      </template>
      <template v-else>
        <flex-row>
          <el-image :src="icon"></el-image>
          <span style="margin-left: 10px;">{{ label }}</span>
        </flex-row>
        <div style="width: 100px;">
          <span style="font-size: 20px;">{{ value === '' ? '-' : value }}</span>
          <span>{{ unit }}</span>
        </div>
      </template>
    </flex-row>
  </div>
</template>

<script>
import FlexRow from "@/components/base/FlexRow";
export default {
  name: "IconLabelValue",
  components: {
    FlexRow
  },
  props: {
    icon: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      default: ""
    },
    label: {
      type: String,
      default: ""
    },
    unit: {
      type: String,
      default: ""
    },
    type: {
      type: [Number],
      default: 1
    }
  }
};
</script>

<style lang="scss" scoped>
.icon-label-value {
  background: rgba(236, 242, 249, 1);
  border-radius: 8px;
  padding: 7px;
}
.label-value {
  text-align: center;
  flex: 1;
  .value {
    color: #308ae7;
    font-size: 24px;
  }
}
</style>
